<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<template>
  <div class="confirm_container">
    <div class="masking"></div>
    <div class="dialog-contet">
      <div class="dialog" :style="{ 'background-color': background }">
        <p class="confirm_title" :class="{'title-center':confirmObj.titleTextCenter}" v-if="confirmObj.title">{{ confirmObj.title || '' }}</p>
        <p class="confirm_tips" :class="{'title-center':confirmObj.tipsTextCenter}" v-if="confirmObj.tips">{{ confirmObj.tips }}</p>
        <div class="confirm-question-group" v-if="Array.isArray(confirmObj.questionList) && confirmObj.questionList.length>0">
          <ul class="confirm-question">
            <li v-for="(item,index) in confirmObj.questionList" :key="index">
              <span class="list-icon-box">
                <em class="list-icon"></em>
              </span>
              <span>{{item}}</span>
            </li>
          </ul>
        </div>
        <div class="btn_line">
          <button class="btn" :style="{ 'background-color': background }" @click="cancel" v-if="confirmObj.showCancelButton">{{confirmObj.cancelButtonText || '取消'}}</button>
          <span class="devider" v-if="confirmObj.showCancelButton"></span>
          <button class="btn" :style="{ 'background-color': background }" @click="sureClick">{{confirmObj.confirmButtonText || '确定'}}</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    confirmObj: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      background: window.isDark ? '#202224' : '#FFFFFF',
    }
  },
  methods: {
    // 取消
    cancel() {
      this.$emit('cancel');
      
    },

    // 确认按钮
    sureClick() {
      this.$emit('sureClick');
    }
  }
}
</script>
<style scoped>
.masking {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  background-color: #000;
  opacity: 0.2;
}
.dialog-contet {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 0 1.6rem;
  transform: translate(-50%, -50%);
  max-width: 44.2rem;
  z-index: 101;
  width: 100%;
}
.dialog {
  border-radius: 2.8rem;
  padding: 0 2.4rem 1.6rem;
}

.confirm_title {
  padding: 1.5rem 0;
  color: rgba(0, 0, 0, 0.9);
  font-family: HarmonyHeiTi;
  font-weight: bold;
  font-size: 2rem;
  line-height: normal;
  letter-spacing: 0px;
}
.title-center {
  text-align: center;
}

.confirm_tips {
  font-family: HarmonyOS_Sans_SC;
  word-break: break-all;
  padding-bottom: 0.8rem;
  color: rgba(0, 0, 0, 0.9);
  font-weight: medium;
  font-size: 1.6rem;
  line-height: normal;
  letter-spacing: 0px;
}

.btn_line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.devider {
  width: 1px;
  height: 3rem;
  background: #ccc;
}

.btn {
  height: 4rem;
  line-height: 4rem;
  flex: 1;
  border: 0;
  background: #fff;
  color: #fb6522;
  font-weight: 500;
  font-size: 1.6rem;
}

.btn:active {
  color: #fff;
  background-color: #fb6522;
  border-radius: 4rem;
}
.confirm-question-group {
  padding-top: 0.8rem;
  padding-bottom: 1.7rem;
}
.confirm-question .list-icon-box {
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0.4rem;
  left: 0;
}
.confirm-question .list-icon-box .list-icon {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
}
.confirm-question li {
  list-style: none;
  position: relative;
  padding-left: 2rem;
  font-size: 1.4rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 2.2rem;
}
</style>